<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>速报视图自动发布后台管理系统</title>
  <link rel="stylesheet" href="$LAYUI/css/layui.css" media="all" />
  <script type="text/javascript" src="$LAYUI/layui.js"></script>
  <script type="text/javascript" src="$JS/jquery-2.1.1.min.js"></script>
  <script async defer src="http://maps.google.cn/maps/api/js?key=AIzaSyCbLfKHIBp1w36w3y04cK92v2uYNUuO9OU&callback=initMap"></script>
  <script></script>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .wrapper {
    background: #e9ebee;
    /* background: -webkit-linear-gradient(top left, #57bebd 0%, #53e3a6 100%);
    background: linear-gradient(to bottom right, #57bebd 0%, #53e3a6 100%); */
    /* background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
    background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%); */
    opacity: 0.8;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .container {
  max-width: 560px;
  margin: 75px auto 0 auto;
  padding: 0;
  text-align: center;
}
.wrapper h1 {
  font-size: 25px;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-put;
          transition-timing-function: ease-in-put;
  font-weight: 200;
  color: rgba(12, 1, 1, 0.9);
  display: block;
  text-align: center;
  margin: 50px auto 0 auto;
}
.wrapper .container .bordiv{
  margin: auto auto;
  /* border: 2px solid rgba(255, 255, 255, 0.4); */
}
.wrapper .container .layui-form-label {
  padding-left: 30px;
  padding-right: 0;
}
.wrapper .container .layui-form-item input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  border: 1px solid #38f;
  background-color: rgba(255, 255, 255, 0.2);
  width: 240px;
  border-radius: 10px;
  padding: 10px 15px;
  margin: 0 auto 15px auto;
  display: block;
  text-align: center;
  font-size: 18px;
  color: black;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
  font-weight: 300;
}
.wrapper .container .layui-form-item span {
  font-size: 15px;  
  font-weight:bold;
  color: rgb(0, 0, 0);
  display: block;
  max-width: 70px;
}
.wrapper .container .layui-form-item input:hover {
  background-color: rgba(230, 241, 127, 0.4);
}
.wrapper .container .layui-form-item input:focus {
  background-color: rgba(230, 241, 127, 0.4);
  width: 260px;
  color: #53e3a6;
}
.wrapper .container .layui-form-item .btn {
  margin: 50px auto 0 auto;
}
.wrapper .container .layui-form-item button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  background-color: #1E9FFF;
  width: 85%;
  padding-top: 5px;
  padding-bottom: 5px;
  /* height: 28px; */
  line-height: 28px;
  /* border: 1px solid #53e3a6; */
  /* padding: 10px 10px; */
  margin: auto auto auto auto;
  /* color: #53e3a6; */
  border-radius: 10px;
  /* width: 250px;; */
  cursor: pointer;
  font-size: 18px;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
}
.wrapper .container .layui-form-item button:hover {
  background-color: rgba(2, 28, 9, 0.5);
}
</style>

<body>
  <div class="wrapper">
    <h1>速报视图自动发布后台管理系统</h1>
    <div class="container">
      <div class="layui-form-item bordiv">
        <div class="layui-inline">
          <label class="layui-form-label"><span>经&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp度:&nbsp</span></label>
          <div class="layui-input-inline">
            <input type="text" id="longtitude" name="longtitude" required lay-verify="number" placeholder="请输入经度"
              autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label"><span>纬&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp度:&nbsp</span></label>
          <div class="layui-input-inline">
            <input type="text" id="latitude" name="latitude" required lay-verify="number" placeholder="请输入纬度"
              autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label"><span>震&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp级:&nbsp</span></label>
          <div class="layui-input-inline">
            <input type="text" id="magnitude" name="magnitude" required lay-verify="number" placeholder="请输入震级"
              autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label"><span>深&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp度:&nbsp</span></label>
          <div class="layui-input-inline">
            <input type="text" id="depth" name="depth" required lay-verify="number" placeholder="请输入深度/km" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label"><span>时&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp间:&nbsp</span></label>
          <div class="layui-input-block">
            <!-- 时间今天需要去掉 -->
            <input class="layui-input" id="time" placeholder="自定义日期格式" onclick="layui.laydate({elem: this, btns: ['clear', 'confirm'], min:'2015-01-01 00:00:00',max:'2015-12-31 23:59:59', istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
          </div>
        </div>
        <div class="layui-form-item btn">
          <button class="layui-btn layui-btn-normal" lay-filter="formDemo1" id="publishEarth" onclick="getCityName()">发布地震</button>
        </div>
      </div>
      <!-- 初始化一个地图，但是把它隐藏了 -->
      <div id="map" style="width: 100px;height:100px; display: none;"></div>
    </div>
  </div>
</body>

<!-- //日期设置 -->
<script type="text/javascript">

  layui.use(['layer', 'laydate'], function () {
    var layer = layui.layer,
      laydate = layui.laydate;

    var start = {
      min: laydate.now()
      , max: '2099-06-16 23:59:59'
      , istoday: false
      , choose: function (datas) {
        end.min = datas; //开始日选好后，重置结束日的最小日期
        end.start = datas //将结束日的初始值设定为开始日
      }
    };

    var end = {
      min: laydate.now()
      , max: '2015-12-31 23:59:59'
      , istoday: false
      , choose: function (datas) {
        start.max = datas; //结束日选好后，重置开始日的最大日期
      }
    };

  });
</script>

<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10, //缩放
      streetViewControl: false,
      center: { lat: 39.91, lng: 116.40 }
    });
  }
</script>

<script>
  var longtitude = null;
  var latitude = null;
  var depth = null;
  var magnitude = null;
  var city = null;
  var time = null;
  var province = null;
  var district = null;
  var learnmarker = null;
  var Intensity = null;  //烈度，ajax必须要使用的一个参数

  //发布触发的方法
  function getCityName() {
    longtitude = parseFloat(parseFloat(document.getElementById("longtitude").value).toFixed(4));//经度
    latitude = parseFloat(parseFloat(document.getElementById("latitude").value).toFixed(4));//纬度
    depth = parseFloat(document.getElementById("depth").value);//深度
    magnitude = parseFloat(document.getElementById("magnitude").value);//震级
    time = document.getElementById("time").value;//时间
    if (!longtitude || !latitude || !depth || !magnitude || !time) {
      layer.msg('请完善数据');
    } else {
      getCity();//获得县名称
    }
  }

  function getCity() {
    var point = new google.maps.LatLng({ lat: latitude, lng: longtitude });
    var geocoder = new google.maps.Geocoder; //地位到经纬度的地方
    geocoder.geocode({ 'location': point }, function (results, status) {
      if (status === 'OK') {
        if (results[1]) {
          // map.setCenter(point);
          results[0].address_components[0] != undefined ? street = results[0].address_components[0].long_name : street = null;
          results[0].address_components[1] != undefined ? district = results[0].address_components[1].long_name : district = null;
          results[0].address_components[2] != undefined ? city = results[0].address_components[2].long_name : city = null;
          results[0].address_components[3] != undefined ? province = results[0].address_components[3].long_name : province = null;
          //ajax传值
          $.ajax({
            type: 'post',   //方法  
            url: '/newSubao/public/index/pubear/baseInfo',      //文件路径  
            dataType: 'text',//用的是什么字符，json字符在js中相当有优势  
            // data: { "longtitude": longtitude, "latitude": latitude, "depth": depth, "magnitude": magnitude, "time": time, "city": city, "province": province, "district": district, "street": street },//缺少Intensity（必须要）
            data: { "longtitude": longtitude, "latitude": latitude, "depth": depth, "magnitude": magnitude, "time": time, "city": city, "province": province, "district": district, "Intensity": Intensity, "street": street },//data:"IntensityValue=" + params,//要传送的数据
            async: true,//是否同步或者异步  
            success: function (data) {
              layer.msg('提交成功');
              var data = eval("(" + data + ")");
              if (!isNaN(data)) {
                data = parseInt(data);
                if (data) {
                  layer.msg("发布成功");
                  $.post('/newSubao/public/index/Wechatpush/getData', function (data) {
                    let url = data;
                    window.location.href = url;
                  })
                } else {
                  layer.msg("找不到城市");
                }
              } else {
                layer.msg("无数据");
              }
            },
            error: function (data) {
              layer.msg("网络错误");
            }
          });
        } else {
          layer.msg("非中国地域");
        }
      } else {
        layer.msg("请求失败");
      }
    });

  }

</script>

</html>